<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜单</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
    <style>
        .layui-nav-tree {
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;text-align: center">
                <legend>工具类查询结果</legend>
            </fieldset>
            <ul class="layui-nav layui-nav-tree" lay-shrink="all">
                <li class="layui-nav-item" th:each="menu:${menus}">
                    <a href="javascript:;" th:text="${menu.menuName}"></a>
                    <dl th:each="children:${menu.childrenList}" class="layui-nav-child layui-nav-child-c">
                        <dd><a href="javascript:;" th:text="${children.menuName}"></a></dd>
                    </dl>
                </li>
            </ul>
        </div>

        <div class="layui-col-xs6">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>SQL查询结果</legend>
            </fieldset>
            <ul class="layui-nav layui-nav-tree" lay-shrink="all">
                <li class="layui-nav-item" th:each="ms:${menuSql}">
                    <a href="javascript:;" th:text="${ms.menuName}"></a>
                    <dl th:each="childrenSql:${ms.childrenList}" class="layui-nav-child layui-nav-child-c">
                        <dd><a href="javascript:;" th:text="${childrenSql.menuName}"></a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>

<script>

    layui.use('element', function () {
        var element = layui.element;
    });

</script>

</html>